import React from 'react';
import window from '../../util';
import MapStore from '../../stores/list/MapStore';
import _ from 'lodash';
import { observer, inject } from 'mobx-react';
import { Modal ,Button} from "antd";
import {WeaLocaleProvider,WeaDialog} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
import loadjs from 'loadjs';
import {toJS} from 'mobx';

export interface MapPageProps {
    titles: string[];
}

export default class CubeMap extends React.Component<MapPageProps, any> {
    map: any;
    marker: any;
    componentDidMount() {
        if (!loadjs.isDefined('mapjs')) {
            loadjs(["https://webapi.amap.com/maps?v=1.4.4&key=53a92850ca00d7f77aef3297effd8d59"], 'mapjs', {
                //&plugin=AMap.Geocoder,AMap.ToolBar,AMap.Scale
                    success: () => {
                        this.paint(this.props);
                    }
                });
        } else {
            this.paint(this.props);
        }
        
    }
     componentWillReceiveProps(nextProps: MapPageProps) {
         if (!_.isEqual(toJS(this.props.titles), toJS(nextProps.titles))) {
            this.marker && this.map.remove(this.marker);
            this.map &&  this.paint(nextProps);
         }
     }

    paint = (obj) => {
        const that= this;
        if(window.AMap){
            const { titles } = obj;
            if (!this.map) {
                this.map = new window.AMap.Map(this.refs._map, {
                    resizeEnable: true,
                });
            }
            _.forEach(titles,title=>{
                this.geocoder(title)
            })
        }else{
            setTimeout(() => {
                that.paint(that.props);
            }, 50);
        }
        
    }
    geocoder = (title) => {
        const that = this;
        if(window.AMap.Geocoder){
            that.geocoderAfter(title);
        }else{
            window.AMap.plugin(['AMap.Geocoder'],function(){
                that.geocoderAfter(title);
             })
        }
    }
    geocoderAfter = (title)=>{
        const that = this;
        let geocoder = new window.AMap.Geocoder({
            radius: 500,
        });
        //地理编码,返回地理编码结果
        geocoder.getLocation(title, (status, result) => {
            if (status === 'complete' && result.info === 'OK') {
                that.geocoder_CallBack(result);
            } else{
                Modal.info({
                    title: getLabel(15172, '系统提示'),
                    content:getLabel(128181,'未能定位具体位置！ 1.请确保所有字词拼写正确 2.尝试不同的关键字 3.尝试更宽泛的关键字'),
                    onOk() { },
                })
            }
        });
    }
    geocoder_CallBack = (data) => {
        //地理编码结果数组
        var geocode = data.geocodes;
        for (let i = 0; i < 1; i++) {
            const position = [geocode[i].location.getLng(), geocode[i].location.getLat()];
            this.addMarker(i, position, geocode[i].formattedAddress);
        }
        this.map.setFitView();
    }
    addMarker = (_, p, address) => {
        const that = this;
        if(window.AMap.Marker){
            that.addMarkerAfter(_, p, address);
        }else{
            window.AMap.plugin(['AMap.Marker'],function(){
                that.addMarkerAfter(_, p, address);
            });
        }
        
    }
    addMarkerAfter=(_, p, address)=>{
        const that = this;
        that.marker = new window.AMap.Marker({
            map: that.map,
            position: p
        });
        let infoWindow = new window.AMap.InfoWindow({
            content: address,
            offset: { x: 0, y: -30 }
        });
        
        that.marker.on("mouseover", (e) => {
            infoWindow.open(that.map, e.target.getPosition());
        });
        infoWindow.open(that.map, that.marker.getPosition());   //设置显示出来标签内容
    }
    render() {
        return (
            <div style={{ height: '100%' }}>
                <div ref='_map' style={{ height: '100%' }}>
                </div>
            </div>
        )
    }
}


export interface MapViewerProps {
    mapStore: MapStore;
}
@inject('mapStore')
@observer
export class MapViewer extends React.Component<MapViewerProps, any> {
    componentWillMount() {
        const { mapStore } = this.props;
        mapStore.getTitles();
    }
    render() {
        const { mapStore } = this.props;
        return (
            <CubeMap titles={mapStore.titles} />
        )
    }
}

export interface MapDialogProps {
    cubeMap: {
        visible:Boolean;
        location:string;
    };
    onCancel:Function;
    iconInfo?:any;
}
@observer
export class MapDialog extends React.Component<MapDialogProps, any> {
    render() {
        const {cubeMap:{visible,location},onCancel,iconInfo} = this.props;
        return (
            <WeaDialog
                buttons={[<Button type="primary" onClick={onCancel}>{getLabel(309, "关闭")}</Button>]}
                title={getLabel(82639, '地图显示')}
                iconBgcolor={iconInfo.iconBg || "#96358a"}
                icon={iconInfo.icon || 'icon-coms-ModelingEngine'}
                iconFontColor={iconInfo.iconColor || "#fff"}
                visible={visible}
                style={{ width: 700, height: 450 }}
                hasScroll={true}
                onCancel={onCancel}
            >
             {visible &&<CubeMap titles={[location]} />}
        </WeaDialog >
        )
    }
}